<script lang="ts">
import { Vue, Prop, Component, Watch } from "vue-property-decorator";
import { http } from "@/http";
import { operation } from "@/operation";
@Component({})
export default class selectConditionGeometry extends Vue {
  @Prop() mode!: string;
  created() {
    this.getXZQData("650000", "cityList");
  }
  mounted() {}
  @Watch("mode") getMode(mode: string) {
    if (mode == "area") {
      this.leftListSelect = "xzq";
    } else {
      this.leftListSelect = "server";
    }
  }
  provinceList = [];
  cityList = [];
  countyList = [];
  street = [];
  selectedProvince = "新疆维吾尔自治区";
  selectedCity: any = "";
  selectedCounty: any = "";
  dsselect = false;

  leftListSelect = "xzq";

  getXZQData(keword: string, level: string) {
    http
      .get(`https://restapi.amap.com/v3/config/district`, {
        params: {
          key: "b959ec91ed73bce3c6ecfc635f06932d",
          keywords: keword,
          extensions: "all",
        },
      })
      .then((res) => {
        let that: any = this;
        const arr = res["districts"][0]["districts"].sort((a: any, b: any) => {
          return +a.adcode - +b.adcode;
        });
        that[level] = res["districts"][0]["districts"];
        if (level == "countyList") {
          this.dsselect =
            this.countyList.length > 1
              ? this.countyList[0]["adcode"] == this.countyList[1]["adcode"]
              : true;
        }
        setTimeout(() => {
          let pA = operation.polylineToArray(res["districts"][0].polyline);
          if (keword != "100000")
            that.$emit("locate", pA, res["districts"][0].center);
        }, 200);
      });
  }
  handleXZQChange(level: string) {
    this.dsselect = false;
    if (level == "province") {
      this.selectedCity = undefined;
      this.selectedCounty = undefined;
      this.getXZQData(this.selectedProvince, "cityList");
    }
    if (level == "city") {
      this.selectedCounty = undefined;
      this.getXZQData(this.selectedCity, "countyList");
    }
    if (level == "county") {
      this.getXZQData(this.selectedCounty, "street");
    }
  }
  draw(type: string) {
    this.$emit("draw", type);
  }

  addEsri() {
    operation.addEsri();
  }
}
</script>

<template>
  <div id="selectConditionGeometry">
    <ul id="leftList">
      <li
        v-if="mode=='area'"
        @click="leftListSelect = 'xzq'"
        :class="{ select: leftListSelect == 'xzq' }"
      >行政区</li>
      <li
        @click="leftListSelect = 'server'"
        v-if="mode!='area'"
        :class="{ select: leftListSelect == 'server' }"
      >服务选择</li>
      <li @click="leftListSelect = 'draw'" :class="{ select: leftListSelect == 'draw' }">绘制图斑</li>
      <li @click="leftListSelect = 'zb'" :class="{ select: leftListSelect == 'zb' }">经纬度</li>
      <li @click="leftListSelect = 'file'" :class="{ select: leftListSelect == 'file' }">文件导入</li>
    </ul>
    <div class="rightList">
      <div class="xzq" v-if="leftListSelect == 'xzq'">
        <div class="xzqItem">
          <span>省级：</span>
          <a-select
            :disabled="true"
            style="width: 210px"
            v-model="selectedProvince"
            @change="handleXZQChange('province')"
          >
            <a-select-option
              :value="item.adcode"
              v-for="(item, index) of provinceList"
              :key="index"
            >{{ item.name }}</a-select-option>
          </a-select>
        </div>
        <div class="xzqItem">
          <span>市级：</span>
          <a-select style="width: 210px" v-model="selectedCity" @change="handleXZQChange('city')">
            <a-select-option
              :value="item.adcode"
              v-for="(item, index) of cityList"
              :key="index"
            >{{ item.name }}</a-select-option>
          </a-select>
        </div>
        <div class="xzqItem">
          <!-- 区/ -->
          <span>县级：</span>
          <a-select
            style="width: 210px"
            v-model="selectedCounty"
            @change="handleXZQChange('county')"
            :disabled="dsselect"
          >
            <a-select-option
              :value="item.adcode"
              v-for="(item, index) of countyList"
              :key="index"
            >{{ item.name }}</a-select-option>
          </a-select>
        </div>
      </div>
      <div v-if="leftListSelect == 'server'">
        <button @click="addEsri()">draw</button>
      </div>
      <div v-if="leftListSelect == 'draw'">
        <button @click="draw('MultiPolygon')">多边形</button>
        <!-- <button @click="draw('Circle')">Circle</button>
        <button @click="draw('Polygon')">Polygon</button>-->
      </div>
      <div v-if="leftListSelect == 'zb'">zb</div>
      <div v-if="leftListSelect == 'file'">file</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
#selectConditionGeometry {
  padding: 0 14px;
  #leftList {
    float: left;
    width: 80px;
    line-height: 30px;
    border: 1px solid #aaa;
    border-bottom: 0;
    li {
      width: 100%;
      margin: 0 auto;
      border-bottom: 1px solid #aaa;
      text-align: center;
      cursor: pointer;
    }
    li.select {
      color: #1890ff;
    }
  }
  .rightList {
    width: calc(100% - 100px);
    float: left;
    .xzq {
      text-align: center;
      .xzqItem {
        height: 40px;
        line-height: 40px;
        span {
          display: inline-block;
          width: 60px;
          text-align: justify;
          text-align-last: justify;
        }
      }
    }
  }
}
</style>
